<template>
  <div class="refs-demo">
    <h4>$refs 直接访问示例</h4>
    <div class="component-content">
      <el-button @click="focusInput">聚焦输入框</el-button>
      <el-button @click="getChildData">获取子组件数据</el-button>
      <el-button @click="callChildMethod">调用子组件方法</el-button>
      
      <!-- 子组件 -->
      <div class="child-wrapper">
        <el-input ref="inputRef" v-model="inputValue" placeholder="这是一个输入框" />
        <refs-child-component ref="childRef" />
      </div>
    </div>
  </div>
</template>

<script>
import RefsChildComponent from './RefsChildComponent.vue'

export default {
  name: 'RefsDemo',
  components: { RefsChildComponent },
  
  data() {
    return {
      inputValue: ''
    }
  },
  
  methods: {
    focusInput() {
      this.$refs.inputRef.focus()
    },
    
    getChildData() {
      const childData = this.$refs.childRef.getData()
      this.$message.success(`子组件数据: ${childData}`)
    },
    
    callChildMethod() {
      this.$refs.childRef.showMessage()
    }
  }
}
</script>

<style scoped>
.refs-demo {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 15px;
}

.component-content {
  padding: 10px;
  background: #fff;
  border-radius: 4px;
}

.child-wrapper {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #dcdfe6;
}

h4 {
  margin: 0 0 10px 0;
  color: #606266;
}
</style> 